<template>
  <el-form-item :label="label" :prop="prop" class="hibaoSelectForm">
    <el-select
      v-model="selectedVal"
      :clearable="clearable"
      :disabled="disabled"
      filterable
      placeholder="请选择"
      :style="styleObj"
      @change="change"
    >
      <div class="dropdownTitleDiv">
        <span class="dropdownTitle">{{ title1 }}</span>
        <span class="dropdownTitle">{{ title2 }}</span>
      </div>
      <el-option
        v-for="item in options"
        :key="item[val0]"
        :value="item[val0]"
        :label="item[val1]"
      >
        <span class="dropdownSpan" :title="item[val1]">{{ item[val1] }}</span>
        <span class="dropdownSpan" :title="item[val2]">{{ item[val2] }}</span>
      </el-option>
    </el-select>
    <div class="chooseButtonDIV">
      <el-button
        class="chooseButton el-icon-thumb"
        :disabled="disabled"
        @click.stop="choose"
      />
    </div>
  </el-form-item>
</template>

<script>
export default {
  name: 'SelectForm',
  props: {
    label: {
      type: String,
      default: ''
    },
    val0: {// 选择框单项 Id
      type: String,
      default: ''
    },
    val1: {// 选择框第一列内容（主要内容，可搜索）
      type: String,
      default: ''
    },
    val2: {// 选择框第二列内容（扩展内容）
      type: String,
      default: ''
    },
    title1: {// 选择框第一列标题
      type: String,
      default: ''
    },
    title2: {// 选择框第二列标题
      type: String,
      default: ''
    },
    prop: {// 传入表单验证规则
      type: String,
      default: ''
    },
    options: {// 选择框数据源
      type: Array,
      default() {
        return []
      }
    },
    eventType: { // 按钮事件 必须属性
      type: String,
      required: true
    },
    value: {// 接收外部传过来的参数，外部v-model绑定的参数
      type: String,
      default: ''
    },
    clearable: {// 是否可被清空
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    styleObj: {
      type: Object,
      default: () => {
        return {
          width: '80%'
        }
      }
    }
  },
  data() {
    return {
      selectedVal: ''
    }
  },
  watch: {
    value() { // value改变时，内部选中的值也跟着改变
      this.selectedVal = this.value
    }
  },
  methods: {
    choose() {
      this.$emit(this.eventType)
    },
    change() {
      // 调用父方法，给输入框传值
      this.$emit('input', this.selectedVal)
    }
  }
}
</script>
<style scoped>
  .dropdownSpan{
    display: inline-block;
    width: 100px;
    margin-left: 20px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .dropdownTitle{
    display: inline-block;
    width: 100px;
    font-size: 16px;
    margin-left: 20px;
    line-height: 34px;
    color: grey;
  }
  .dropdownTitleDiv{
    height: 34px;
    padding: 0 20px;
    background-color: #F5F7FA;
    z-index: 1;
    /*position: fixed;*/

  }
  .el-scrollbar__view.el-select-dropdown__list{
    /*padding-top: 0px !important;*/
  }
  .dropdownTitleDiv+li{
    /*margin-top: 30px;*/
  }
  .el-select-dropdown__wrap,.el-scrollbar__wrap{
    max-height: 200px !important;
  }
  .chooseButtonDIV{
    display: inline-block;
    position: fixed
  }
  .chooseButtonDIV button{
    padding: 0px 8px;
    font-size: 20px;
  }
  .chooseButton{
    padding: 7px;
    height: 34px;
    margin-left: 5px;
    border-color: #C0C4CC
  }
</style>

